{template 'header'}
<style type="text/css">
.event-page {
    line-height:0;
    padding-bottom:80px;
}
.event-page .can-refund-bar {
    background:#fff;
    height:38px;
    width:100%;
    position:fixed;
    bottom:60px;
    max-width:480px;
    left:0;
    right:0;
    margin:auto;
    box-shadow:0 -1px 1px 1px #f9f9f9;
}
.event-page .can-refund-bar img {
    width:18px;
    height:auto;
    margin-right:8px;
}
.event-page .can-refund-bar p {
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    font-size:18px;
}
.chapter-loader .sk-fading-circle {
    width:40px;
    height:40px;
    position:relative;
}
.chapter-loader .sk-fading-circle .sk-circle {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.chapter-loader .sk-fading-circle .sk-circle:before {
    content:'';
    display:block;
    margin:0 auto;
    width:15%;
    height:15%;
    background-color:#fff;
    border-radius:100%;
    -webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
    -webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.chapter-loader .sk-fading-circle .sk-circle2 {
    -webkit-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    transform:rotate(30deg);
}
.chapter-loader .sk-fading-circle .sk-circle3 {
    -webkit-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    transform:rotate(60deg);
}
.chapter-loader .sk-fading-circle .sk-circle4 {
    -webkit-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}
.chapter-loader .sk-fading-circle .sk-circle5 {
    -webkit-transform:rotate(120deg);
    -webkit-transform:rotate(120deg);
    -ms-transform:rotate(120deg);
    transform:rotate(120deg);
}
.chapter-loader .sk-fading-circle .sk-circle6 {
    -webkit-transform:rotate(150deg);
    -webkit-transform:rotate(150deg);
    -ms-transform:rotate(150deg);
    transform:rotate(150deg);
}
.chapter-loader .sk-fading-circle .sk-circle7 {
    -webkit-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
}
.chapter-loader .sk-fading-circle .sk-circle8 {
    -webkit-transform:rotate(210deg);
    -webkit-transform:rotate(210deg);
    -ms-transform:rotate(210deg);
    transform:rotate(210deg);
}
.chapter-loader .sk-fading-circle .sk-circle9 {
    -webkit-transform:rotate(240deg);
    -webkit-transform:rotate(240deg);
    -ms-transform:rotate(240deg);
    transform:rotate(240deg);
}
.chapter-loader .sk-fading-circle .sk-circle10 {
    -webkit-transform:rotate(270deg);
    -webkit-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    transform:rotate(270deg);
}
.chapter-loader .sk-fading-circle .sk-circle11 {
    -webkit-transform:rotate(300deg);
    -webkit-transform:rotate(300deg);
    -ms-transform:rotate(300deg);
    transform:rotate(300deg);
}
.chapter-loader .sk-fading-circle .sk-circle12 {
    -webkit-transform:rotate(330deg);
    -webkit-transform:rotate(330deg);
    -ms-transform:rotate(330deg);
    transform:rotate(330deg);
}
.chapter-loader .sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay:-1.1s;
    -webkit-animation-delay:-1.1s;
    animation-delay:-1.1s;
}
.chapter-loader .sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay:-1s;
    -webkit-animation-delay:-1s;
    animation-delay:-1s;
}
.chapter-loader .sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay:-0.9s;
    -webkit-animation-delay:-0.9s;
    animation-delay:-0.9s;
}
.chapter-loader .sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay:-0.8s;
    -webkit-animation-delay:-0.8s;
    animation-delay:-0.8s;
}
.chapter-loader .sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay:-0.7s;
    -webkit-animation-delay:-0.7s;
    animation-delay:-0.7s;
}
.chapter-loader .sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay:-0.6s;
    -webkit-animation-delay:-0.6s;
    animation-delay:-0.6s;
}
.chapter-loader .sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay:-0.5s;
    -webkit-animation-delay:-0.5s;
    animation-delay:-0.5s;
}
.chapter-loader .sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay:-0.4s;
    -webkit-animation-delay:-0.4s;
    animation-delay:-0.4s;
}
.chapter-loader .sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay:-0.3s;
    -webkit-animation-delay:-0.3s;
    animation-delay:-0.3s;
}
.chapter-loader .sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay:-0.2s;
    -webkit-animation-delay:-0.2s;
    animation-delay:-0.2s;
}
.chapter-loader .sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay:-0.1s;
    -webkit-animation-delay:-0.1s;
    animation-delay:-0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity:0;
    }
    40% {
        opacity:1;
    }
}
@keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity:0;
    }
    40% {
        opacity:1;
    }
}
.g-event-bottom .play-button {
    background-color:#ed3974;
    box-shadow:#ed3974 0px 0px 4px 0px;
}
.g-event-bottom .red {
    background-color:#ed3974;
}
.g-event-bottom .play-button:active {
    background-color:#ed3974;
    opacity:0.9;
}
.g-event-bottom .bottom-button-right-right {
    background-color:#ed3974;
}
.g-event-bottom .button-mid-right {
    background-color:#ed3974;
}
.g-event-bottom .button-mid-right .btn-rg:active {
    background-color:#ed3974;
}
.g-event-bottom .redp-bottom-btn-right {
    background-color:#ffe398;
    color:#ed3974;
}
.g-event-bottom .redp-bottom-btn-right:active {
    background-color:#ffe398;
}
.g-event-bottom .schedule-head {
    border:3px solid #ed3974 !important;
}
.g-event-bottom .schedule-len {
    background:#ed3974 !important;
}
.g-event-bottom {
    height:60px;
    background:#fff;
    padding:0;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    z-index:1;
    text-align:center;
}
@-webkit-keyframes event-redp-gold-1 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(0, 10px, 0);
        -ms-transform:translate3d(0, 10px, 0);
        transform:translate3d(0, 10px, 0);
    }
}
@keyframes event-redp-gold-1 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(0, 10px, 0);
        -ms-transform:translate3d(0, 10px, 0);
        transform:translate3d(0, 10px, 0);
    }
}
@-webkit-keyframes event-redp-gold-2 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(-10px, 10px, 0);
        -ms-transform:translate3d(-10px, 10px, 0);
        transform:translate3d(-10px, 10px, 0);
    }
}
@keyframes event-redp-gold-2 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(-10px, 10px, 0);
        -ms-transform:translate3d(-10px, 10px, 0);
        transform:translate3d(-10px, 10px, 0);
    }
}
@-webkit-keyframes event-redp-gold-3 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(10px, 10px, 0);
        -ms-transform:translate3d(10px, 10px, 0);
        transform:translate3d(10px, 10px, 0);
    }
}
@keyframes event-redp-gold-3 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(10px, 10px, 0);
        -ms-transform:translate3d(10px, 10px, 0);
        transform:translate3d(10px, 10px, 0);
    }
}
@-webkit-keyframes redp-flip {
    0% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
    }
    50% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
    }
    100% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
    }
}
@keyframes redp-flip {
    0% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
    }
    50% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
    }
    100% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
    }
}
.g-event-bottom.v2 {
    height:72px;
}
.g-event-bottom.v2 .button-wrap {
    height:72px;
    box-shadow:0 -1px 15px 1px rgba(0, 0, 0, 0.05);
}
.g-event-bottom.v2 .rp-menu {
    bottom:72px;
}
.g-event-bottom .redp-wrap .close {
    position:absolute;
    right:20px;
    width:16px;
    top:20px;
}
.g-event-bottom .redp-wrap .redp-no-opened .redp-no-opened-content {
    max-width:335px;
    width:280px;
    height:425.43px;
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;
    padding-top:60px;
    line-height:1.7;
}
.g-event-bottom .redp-wrap .redp-no-opened .avatar {
    width:60px;
    height:60px;
    border-radius:100%;
    overflow:hidden;
}
.g-event-bottom .redp-wrap .redp-no-opened .name {
    color:#FFE0AB;
    font-size:18px;
    margin-bottom:19px;
}
.g-event-bottom .redp-wrap .redp-no-opened .l1 {
    color:#FFE0AB;
    font-size:20px;
    margin-bottom:51px;
}
.g-event-bottom .redp-wrap .redp-no-opened .open-icon {
    width:112px;
    opacity:1;
}
.g-event-bottom .redp-wrap .redp-opened .redp-opened-content {
    max-width:335px;
    width:280px;
    height:425.43px;
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;
    padding-top:60px;
    line-height:1.7;
    background-image:url(https://staticqc.xiaoxiafm.com/image/redp_opened.d5c6514f27735ee4cf13a37c32c73b9c.png);
    color:#FFE0AB;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.g-event-bottom .redp-wrap .redp-opened .avatar-wrap {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin-bottom:42px;
}
.g-event-bottom .redp-wrap .redp-opened .avatar-wrap .avatar {
    width:40px;
    height:40px;
    margin-right:10px;
}
.g-event-bottom .redp-wrap .redp-opened .avatar-wrap .avatar img {
    border-radius:100%;
    object-fit:cover;
}
.g-event-bottom .redp-wrap .redp-opened .avatar-wrap p {
    font-size:16px;
    line-height:16px;
}
.g-event-bottom .redp-wrap .redp-opened .price {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    font-size:51px;
    margin-bottom:5px;
}
.g-event-bottom .redp-wrap .redp-opened .price p {
    line-height:51px;
}
.g-event-bottom .redp-wrap .redp-opened .price small {
    font-size:20px;
    margin-left:5px;
    margin-top:16px;
}
.g-event-bottom .redp-wrap .redp-opened .l1 {
    font-size:16px;
    margin-bottom:60px;
}
.g-event-bottom .redp-wrap .redp-opened .btn {
    width:207px;
    height:48px;
    margin:auto;
    background:#F15642;
    font-size:20px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin-bottom:10px;
    border-radius:24px;
}
.g-event-bottom .redp-wrap .redp-opened .time {
    color:#A3A5B0;
}
.g-event-bottom .rp-menu {
    position:fixed;
    bottom:60px;
    height:180px;
    line-height:1.7;
    background:#fff;
    width:100%;
    max-width:480px;
    z-index:2;
    left:0;
    right:0;
    margin:auto;
}
.g-event-bottom .rp-menu li {
    border-bottom:1px solid #f0f0f0;
    height:60px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    padding:0 10px;
    font-size:16px;
}
.g-event-bottom .anim-flip {
    -webkit-animation:redp-flip 1.5s linear 0s infinite;
    animation:redp-flip 1.5s linear 0s infinite;
}
.g-event-bottom .menu .menu-wrap {
    z-index:0;
    background-color:#fff;
    height:400px;
    bottom:-340px;
    -webkit-transition:bottom 0.5s ease;
    transition:bottom 0.5s ease;
}
.g-event-bottom .menu .menu-wrap .menu-top {
    height:40px;
    width:100%;
    padding-top:10px;
}
.g-event-bottom .menu .menu-wrap .menu-top img {
    width:25px;
    height:8px;
    margin-top:5px;
}
.g-event-bottom .menu .menu-wrap .menu-title {
    position:relative;
    height:30px;
    width:100%;
    text-indent:41px;
    line-height:30px;
    text-align:left;
    font-weight:600;
    font-size:20px;
}
.g-event-bottom .menu .menu-wrap .menu-title::before {
    content:' ';
    position:absolute;
    left:28px;
    top:5px;
    width:6px;
    height:21px;
    background:-webkit-linear-gradient(#fe5064, #fe956f);
}
.g-event-bottom .menu .menu-wrap .menu-list {
    padding:0 15px;
    height:280px;
    overflow:auto;
    margin-top:20px;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li {
    padding:8px 0;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    border-bottom:1px solid #efefef;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .menu-li-txt {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    line-height:30px;
    text-align:left;
    text-indent:15px;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .txt-color {
    color:#fe5164;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .menu-img {
    margin-right:10px;
    width:24px;
    height:24px;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .menu-img img {
    height:20px;
    width:20px;
    margin-top:5px;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .menu-img .lock-img {
    height:18px;
    width:18px;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .menu-txt {
    width:60px;
    line-height:28px;
    color:#fe5164;
    margin-right:0;
}
.g-event-bottom .botton-wrap {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    position:relative;
    height:60px;
    width:100%;
    background:#fff;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}
.g-event-bottom .botton-wrap.v2 {
    height:72px;
    box-shadow:0 -1px 15px 1px rgba(0, 0, 0, 0.05);
}
.g-event-bottom .botton-wrap .audio-btn-wrap {
    margin-left:16px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.g-event-bottom .botton-wrap .audio-btn-wrap .play-button {
    margin-right:8px;
    border-radius:100%;
    width:52px;
    height:52px;
}
.g-event-bottom .botton-wrap .audio-btn-wrap .audio-txt {
    height:100%;
    line-height:1.5;
    font-size:14px;
}
.g-event-bottom .botton-wrap .bottom-button-right {
    -webkit-text-decoration:none;
    text-decoration:none;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    height:100%;
    line-height:1.7;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-left {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:90px;
    margin:0 20px;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-left .opened-price {
    text-align:left;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-left .opened-price p {
    font-size:18px;
    line-height:22px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    font-weight:bolder;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-left .opened-price p small {
    margin-left:5px;
    font-size:12px;
    color:#777A8B;
    -webkit-text-decoration:line-through;
    text-decoration:line-through;
    font-weight:normal;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-left .opened-price .red {
    font-size:12px;
    border-radius:10px;
    color:#fff;
    width:90px;
    text-align:center;
    display:block;
    font-weight:normal;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-right {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    color:#fff;
    font-size:20px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.g-event-bottom .botton-wrap .loader .sk-fading-circle {
    width:30px;
    height:30px;
}
.g-event-bottom .botton-wrap .audio-schedule {
    position:absolute;
    display:none;
    height:30px;
    width:100%;
    top:-30px;
    line-height:30px;
    background-color:#fff;
    border-top:1px solid #ddd;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-start {
    width:60px;
    height:100%;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-bar-wrap {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-bar-wrap .schedule-bar {
    position:relative;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    width:100%;
    height:5px;
    background-color:#ddd;
    border-radius:15px;
    margin-top:12px;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-bar-wrap .schedule-bar .schedule-len {
    position:absolute;
    left:0;
    width:0%;
    height:100%;
    background:-webkit-linear-gradient(left, #fe956f, #fe5064);
    border-radius:15px;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-bar-wrap .schedule-bar .schedule-len .schedule-head {
    position:absolute;
    right:-14px;
    top:-4.6px;
    height:15px;
    width:15px;
    border-radius:50%;
    background:#fff;
    touch-action:none;
    border:3px solid #fe6a68;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-end {
    width:60px;
    height:100%;
}
.g-event-bottom .botton-wrap .button-left {
    width:34%;
    height:60px;
    line-height:60px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.g-event-bottom .botton-wrap .button-left .audio-btn {
    height:45px;
    width:45px;
    margin-top:8px;
}
.g-event-bottom .botton-wrap .button-left .audio-txt {
    font-size:17px;
    text-align:left;
    font-weight:600;
    text-indent:7px;
    line-height:63px;
}
.g-event-bottom .botton-wrap .button-mid-right {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    height:60px;
}
.g-event-bottom .botton-wrap .button-mid-right .btn-rg {
    height:60px;
    width:100%;
    padding-top:18px;
    line-height:27px;
    font-weight:600;
    font-size:23px;
    -webkit-letter-spacing:3px;
    -moz-letter-spacing:3px;
    -ms-letter-spacing:3px;
    letter-spacing:3px;
    color:#fff;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn {
    line-height:1.7;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    height:60px;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn .redp-bottom-btn-left {
    color:#fff;
    margin-left:10px;
    width:81px;
    margin-right:10px;
    text-align:left;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn .redp-bottom-btn-left .top {
    font-size:12px;
    line-height:12px;
    margin-bottom:5px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn .redp-bottom-btn-left .bottom {
    font-size:12px;
    line-height:12px;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn .redp-bottom-btn-right {
    height:50px;
    line-height:24px;
    font-size:14px;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    border-radius:24px;
    margin-right:8px;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn .redp-bottom-btn-right:active {
    opacity:0.9;
}
.g-event-bottom .video-modal-wrap {
    line-height:1.7;
}
.g-event-bottom .video-modal-wrap .video-wrap {
    line-height:0;
}
.g-event-bottom .video-modal-wrap .video-wrap video {
    background:#fff;
}
.g-event-bottom .video-modal-wrap .video-modal-content {
    max-width:480px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .close {
    width:30px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap {
    padding-top:6px;
    background:#fff;
    margin-bottom:20px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .title {
    margin-bottom:16px;
    padding:0 16px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .title .left {
    font-size:19px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .title .right {
    font-size:16px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter {
    white-space:nowrap;
    overflow-x:scroll;
    overflow-y:hidden;
    padding-bottom:15px;
    vertical-align:top;
    vertical-align:top;
    border-bottom:1px solid #eee;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap {
    vertical-align:top;
    overflow:hidden;
    position:relative;
    width:156px;
    height:91px;
    background:#f7f5f5;
    border-radius:6px;
    display:inline-block;
    margin-right:8px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap:last-child {
    margin-right:0;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap.active {
    color:#FE5164;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap:active {
    opacity:0.7;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap.lock {
    color:#999;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap.lock::after {
    content:' ';
    background-image:url(https://staticqc.xiaoxiafm.com/image/video-lock.ed7003caea5fa2878b452b556c290447.png);
    width:19px;
    height:16px;
    position:absolute;
    right:3px;
    top:4px;
    background-size:contain;
    background-repeat:no-repeat;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap .chapter-item {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    height:91px;
    text-align:center;
    overflow:hidden;
    white-space:normal;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap p {
    width:112px;
}

.pay-confirm-form-page {
    padding:0 0.15rem;
    padding-bottom:1.2rem;
}
.pay-confirm-form-page img {
    width:100%;
}
.pay-confirm-form-page .signup-info {
    padding:0.18rem 0.26rem;
    background-color:#fff;
    border-radius:0.1rem;
    margin-top:0.12rem;
}
.pay-confirm-form-page .signup-info .person-info {
    margin-bottom:0.16rem;
}
.pay-confirm-form-page .signup-info .person-info .person-avatar {
    width:50px;
    height:50px;
    border-radius:50%;
    margin-right:0.18rem;
}
.pay-confirm-form-page .form-block {
    background-color:#fff;
    border-radius:10px;
    box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.04);
    text-align:center;
}
.pay-confirm-form-page .form-block .form-title {
    font-size:0.18rem;
    font-weight:bold;
}
.pay-confirm-form-page .form-block .goods-word {
    padding-bottom:0.1rem;
    color:#FE6B69;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    font-size:0.16rem;
}
.pay-confirm-form-page .form-block .g-form {
    padding:0.2rem 0.25rem 0.1rem;
}
.pay-confirm-form-page .form-block .g-form label {
    width:0.54rem;
    color:#000;
}
.pay-confirm-form-page .form-block .g-form .g-form-item input {
    padding:0 0.12rem;
}
.pay-confirm-form-page .protocol {
    margin-top:0.18rem;
    padding:0 0.1rem;
}
.pay-confirm-form-page .protocol .protocol-check {
    -webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0;
    width:16px;
    height:16px;
    margin-right:4px;
    display:inline-block;
    margin-top:0.02rem;
    background-size:cover;
    background-image:url({RES}img/noselect.png);
}
.pay-confirm-form-page .protocol .protocol-check.checked {
    background-image:url({RES}img/selected.png);
}
.pay-confirm-form-page .protocol span {
    color:#979797;
}
.pay-confirm-form-page .protocol a {
    color:#6a7fa5;
}
      .foot-right {
        background-color: #ddd;
        transition: all 0.2s;
      }
      .foot-right:active {
        background-color: #ddd;
        opacity: 0.9;
      }
      .signup-form-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        min-height: 60px;
        width: 100%;
        background-color: #fff;
        text-align: center;
        line-height: 60px;
        max-width: 480px;
        margin: auto;
        right: 0;
        box-shadow: 0px 0px 8px 1px rgba(238,238,238,.4);
      }
      
      .signup-form-footer .foot-left {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        height: 100%;
        -webkit-align-self: center;
        align-self: center
      }
      
      .signup-form-footer .foot-left .left-now-price {
        color: #333;
        font-size: 0.15rem;
        text-align: right;
        padding-right: 10px;
        line-height: 15px
      }
      
      .signup-form-footer .foot-left .left-old-price {
        height: 100%;
        color: #959595;
        line-height: 14px;
        text-decoration: line-through;
        font-size: 0.14rem
      }
      
      .signup-form-footer .foot-right {
        width: 1.45rem;
        height: 100%;
        color: #fff;
        font-size: 0.23rem;
        font-weight: 600;
        letter-spacing: 3px
      }

      .footer-tip {
        position:fixed;
        max-width:480px;
        width:100%;
        height:44px;
        left: 0;
        right: 0;
        margin: auto;
        background: #fff;
        font-size: 0.14rem;
        transition: all 1s;
        padding: 0 0.3rem;
        border-bottom: 1px solid rgba(238,238,238,0.4);
      }

      .tip-li {
        display:flex;
      }

      .footer-circle {
        height: 20px;
        width: 20px;
      }

      .footer-circle img {
        height: 100%;
      }

      .footer-tip-word {
        padding: 0.03rem 0 0 0.05rem
        color: #9b9b9b
      }
      .foot-right {
        background-color: #ed3974;
      }
      .foot-right:active {
        background-color: #ed3974;
        opacity: 0.8;
      }
      
       /* -----------------------------模态框样式-------------------------------- */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 根据浏览器定位 */
            z-index: 1; /* 放在底部 */
            left: 0;
            bottom:0;
            width: 100%; /* 全宽 */
            height: 100%; /* 全高 */
            overflow: hidden; /* 允许滚动 */
            background-color: rgba(0,0,0,0.4); /* 背景色 */
        }
        /*模态框内容*/
        .modal-content {
            display: flex; /*采用flexbox布局*/
            flex-direction: column; /*垂直排列*/
            position: absolute;
            bottom:0;
            background-color: #fefefe;
            /* margin: 127% 0;  */
            padding: 20px 20px 35px;
            width: 90%;
            animation: topDown 0.4s; /*自定义动画，从模态框内容上到下出现*/
            box-sizing: content-box;
            font-size: 16px;
        }
        @keyframes topDown {
            from {bottom: -100px; opacity: 0}
            to {bottom:0px; opacity: 1}
        }
        .bottom_pay_btn{
            position:absolute;
            bottom:10px;
            width:89%;
            /* margin-left:1%; */
            height:33px;
            line-height: 33px;
            color: #fff;
            text-align: center;
            background:#dc443b;
            border-radius:4px;
            
        }
        /*模态框头部*/
        .modal-header {
            display: flex; /*采用flexbox布局*/
            flex-direction: row; /*水平布局*/
            align-items: center; /*内容垂直居中*/
            justify-content: space-between; 
        }
        /*关闭X 样式*/
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        /* 选择支付 */
        .payway{
            padding:2vh 0;
            font-size: 14px;
            text-align: left;
        }
    </style>
    <div class="pay-confirm-form-page g-page">
        <div class="signup-info">
            <div class="g-flex col-center person-info">
                <img class="person-avatar" src="{$mem['avatar']}" style="width: 40px; height: 40px;">
                <div class="name">{$mem['nickname']}</div>
            </div>
            <img src="{RES}img/signup.png" style="width: 100%;">
        </div>
        <div class="form-block" style="margin-top: 0.13rem;">
            <p class="form-title" style="padding: 18px 0px 5px;">填写真实报名信息</p>
            {if $book['clock_num']>0}
            <p class="goods-word">坚持全勤打卡，作为奖励
                <br>书院将全额返还学费</p>
			{/if}
            <form action='' method="post" class="g-form" style="padding-top: 0.06rem; padding-bottom: 0.16rem;">
                <div class="g-form-item" style="margin-bottom: 0.16rem;">
                    <label>姓名</label>
                    <input type="text" name="uname" class="g-full" placeholder="请输入姓名" value="{$old['uname']}">
                </div>
                <div class="g-form-item" style="margin-bottom: 0.16rem;">
                    <label>手机</label>
                    <input type="tel" name="mobile" class="g-full" placeholder="请输入手机号" value="{$old['mobile']}">
                </div>
                {if $cfg['refund_day']>0}
                <div style="color: rgb(74, 74, 74);">院长倾力推荐 · 购买后{$cfg['refund_day']}天内无忧退款</div>
                {/if}
                
                {if $cfg['creditswitch']==1}
                 <!-- 模态框 -->
				    <div id="myModal" class="modal">
				        <div class="modal-content">
				            <div class="modal-header">
				                <div>支付方式</div>
				                <!-- <span id="closeBtn" class="close">×</span> -->
				            </div>
				            <div class="modal-body">
				                <label><div class="payway" style="border-bottom:1px solid #f5f5f5"><span>余额支付</span><input type="radio" name="paytype" value="2" checked style="float:right"/></div></label>
				                {if $cfg['mchid']}
				                <label><div class="payway" style="margin-bottom:2vh;"><span>微信支付</span><input type="radio" name="paytype" value="1" style="float:right"/></div></label>
				                {/if}
				            </div>
				            <div class="bottom_pay_btn">支付</div>
				        </div>
				    </div>
				{else}
					<input type="hidden" name="paytype" value="1">
				{/if}
            </form>
        </div>
        <div class="protocol g-flex"><span class="protocol-check checked"></span><span>我同意并愿意遵守<a href="{php echo $this->murl('agreement',array('op'=>'service'))}">《{$cfg['title']}服务协议》</a>和<a href="{php echo $this->murl('agreement',array('op'=>'privacy'))}">《{$cfg['title']}隐私政策》</a></span>
        </div>
        <div class="g-tip " style="position: fixed; top: -30px; left: 0px; width: 100%; height: 30px; text-align: center; line-height: 30px; background-color: rgb(254, 81, 100); color: rgb(255, 255, 255); letter-spacing: 1px; font-size: 15px; transition: all 0.5s;"></div>
        <div class="signup-form-footer g-flex">
            <div class="foot-left g-flex col-center row-center">
                <div class="left-now-price"><span>限时特价 ￥{$book['price']}</span>
                </div>
                <div class="left-old-price"><span>原价￥{$book['original']}</span>
                </div>
            </div><a class="foot-right g-normal-a g-color-white" id="triggerBtn" href="javascript:;">立即报名</a>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">

$(function(){
	$('.protocol-check').click(function(){
		if($(this).hasClass('checked')){
			$(this).removeClass('checked');
		}else{
			$(this).addClass('checked');
		}
	});
	
	$('.foot-right').click(function(){
		if(!$('.protocol-check').hasClass('checked')){
			msgTip('请阅读并同意用户协议');
			return;
		}
		if(!$('input[name=uname]').val()){
			msgTip('姓名不能为空');
			return;
		}
		if(!$('input[name=mobile]').val()){
			msgTip('手机号不能为空');
			return;
		}
		{if $cfg['creditswitch']!=1}
		$('.g-form').submit();
		{/if}
	});
	
	{if $cfg['creditswitch']==1}
	/*建立模态框对象*/
    var modalBox = {};
    /*获取模态框*/
    modalBox.modal = document.getElementById("myModal");
    /*获得trigger按钮*/
    modalBox.triggerBtn = document.getElementById("triggerBtn");
    /*获得关闭按钮*/
    // modalBox.closeBtn = document.getElementById("closeBtn");
    /*模态框显示*/
    modalBox.show = function() {
        this.modal.style.display = "block";
    }
    /*模态框关闭*/
    modalBox.close = function() {
        this.modal.style.display = "none";
    }
    /*当用户点击模态框内容之外的区域，模态框也会关闭*/
    modalBox.outsideClick = function() {
        var modal = this.modal;
        window.onclick = function(event) {
            if(event.target == modal) {
                modal.style.display = "none";
            }
        }
    }
    /*模态框初始化*/
    modalBox.init = function() {
        var that = this;
        this.triggerBtn.onclick = function() {
            that.show();
        }
        // this.closeBtn.onclick = function() {
        //  that.close();
        // }
        this.outsideClick();
    }
    modalBox.init();
	$('.bottom_pay_btn').click(function(){
		{if $fans['credit2']<$book['price']}
			if($('input[name=paytype]:checked').val()==2){
				msgTip("余额不足，剩余余额：{$fans['credit2']}");
				return;
			}
		{/if}
		$('.g-form').submit();
	})
	{/if}
	
})



</script> 
</body>
</html>